<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
 
 
    <div>
        姓名: <input placeholder="输入学生姓名" type="text" id="uname" value="" />
        分数: <input placeholder="输入学生分数" type="text" id="score" value="" />
        <button>添加</button>
    </div>
    <p>学生信息:</p>
    <ul class="persons"></ul>
    <input type="button" value="查找及格的学生" id="search" />
    <p>及格学生如下:</p>
    <ul class="pass"></ul>
 
    <script>
    	//es6语法完成
        let sName = document.querySelector('#uname');
        let sScore = document.querySelector('#score');
        let btn = document.querySelector('button');
        let ul1 = document.querySelector('.persons');
        let search = document.querySelector('#search');
        let ul2 = document.querySelector('.pass');
 
        let arr = [];
 
        btn.addEventListener('click', function () {
 
            let obj = { uname: sName.value, score: sScore.value };
            arr.push(obj);
            sName.value = '';
            sScore.value = '';
 
            let str = '';
            arr.forEach(item => {
                const { uname, score } = item;
                str = str + `<li>姓名：${uname}  分数：${score}</li>`;
            })
            ul1.innerHTML = str;
        })
 
        search.addEventListener('click', function () {
            let newArr = arr.filter(item => {
                return item.score >= 60;
            })
 
            let str = '';
            newArr.forEach(item => {
                const { uname, score } = item;
                str = str + `<li>姓名：${uname}  分数：${score}</li>`;
            })
            ul2.innerHTML = str;
        })

    </script>
</body>
 
</html>